<template>
  <div id="myChart" :style="{width: '100%', height: height+'px'}" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { resizePxNum } from '@/utils'
import { getAction } from '@api/manage'

export default {
  name: 'MyData',
  components: {
    resizePxNum
  },
  props: {
    height: {
      type: Number,
      default: 400
    },
    selectArea: {
      type: String,
      default: ''
    },
    selectTime: {
      type: String,
      default: ''
    },
    switchValue: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      yearList: [],
      dataValueList: [],
      brokenLineValueList: [],
      minL: '',
      maxL: '',
      minR: '',
      maxR: '',
      yearData: [],
      defaultYear: '2022',
      dataList: [],
    }
  },
  created() {
    // console.log("this.selectArea", this.selectArea)
  },
  watch: {
    selectArea(newval, oldval) {
      console.log(newval)
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
    },
    selectTime(newval, oldval) {
      console.log(newval)
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
    },
    switchValue(newval, oldval) {
      console.log(newval)
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
    },
  },
  mounted() {
    this.getData()
    setTimeout(() => {
      this.echartsInit()
    }, 500)
    window.addEventListener('resize', () => {
      this.echartsInit()
    })
  },
  methods: {
    echartsInit() {
      let option = {
        grid: {
          x: '5%',//x 偏移量
          y: '10%', // y 偏移量
          width: '90%', // 宽度
          height: '80%'// 高度
        },
        xAxis: [
          //柱状图X轴
          {
            type: 'category',
            // show: true,
            data: this.yearList,
            //刻度线隐藏
            'axisTick': {
              'show': false
            },
            axisLabel: {
              color: '#7F898D',//x轴文字颜色
              fontSize: resizePxNum(11),//字体大小
              // fontSize: 12//字体大小
            }
          },
          //折线X轴
          {
            type: 'category',
            show: false,
            // data: ['1', '2', '3', '4', '5', '6', '7', '8'],
            //刻度线隐藏
            'axisTick': {
              'show': false
            }
          }
        ],
        yAxis: [
          //柱状图Y轴
          {
            type: 'value',
            // data: ['50', '200', '300', '400',],
            // min: (this.minL - 0.1).toFixed(2),
            // max: (this.maxL + 0.1).toFixed(2),
            // max: this.maxL,
            // interval: 100,
            // 轴线的样式x
            name: "万吨标准煤",
            axisLabel: {
              fontSize: resizePxNum(11)//字体大小
              // fontSize: 12//字体大小
            },
            axisLine: {
              show: true
              // lineStyle: {
              //   color: '#294148',
              //   width: 2,
              // },
            },
            // 网格线样式
            splitLine: {
              show: true,
              // lineStyle: {
              //   color: ['#113945'],
              //   // width: resizePxNum(1),
              //   width: 1,
              // },
              lineStyle: {
                type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
              }
            }

          },
          //折线Y轴
          {
            type: 'value',
            name: '同比',
            // min: (this.minR - 1).toFixed(2),
            // max: (this.maxR + 1).toFixed(2),
            interval: 10,
            axisLabel: {
              formatter: '{value}',
              fontSize: resizePxNum(11)//字体大小
              // fontSize: 12//字体大小
            },
            nameTextStyle: {
              fontSize: resizePxNum(11)//字体大小
              // fontSize: 12//字体大小
            },
            // show: false,
            // 轴线的样式
            axisLine: {
              show: false
              // lineStyle: {
              //   color: '#294148',
              //   width: 2,
              // },
            },
            // 网格线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#113945'],
                width: resizePxNum(1)
                // width: 1
              }
            }
          }
        ],
        // tooltip: {					//---鼠标焦点放在图形上，产生的提示框
        //   show: true,
        //   trigger: 'item',			//---触发类型
        //   backgroundColor: "rgba(255,255,255,0.8)",//tooltip背景颜色
        //   textStyle: {
        //     color: '#5B6264',
        //     // fontSize: resizePxNum(14),//字体大小
        //     fontSize: 14,//字体大小
        //   },
        // },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.8)',//tooltip背景颜色
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
          },
          textStyle: {
            color: '#5B6264',
            // fontSize: resizePxNum(14),//字体大小
            fontSize: 14,//字体大小
          },

        },
        series: [
          //柱状图数据
          {
            data: this.dataValueList,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    // color: 'white',
                    color: '#3F4749',
                    fontSize: resizePxNum(11)
                    // fontSize: 12//字体大小
                  }
                },
                color: {
                  type: 'linear',
                  x: 0,  //右
                  y: 0,  //下
                  x2: 0,  //左
                  y2: 1,  //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#31BDB6' // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: '#29B3AF' // 70% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1F9E9E' // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            type: 'bar',
            showBackground: false,//是否显示背景部分
            // backgroundStyle: {
            //   color: '#4D555B'
            // },//柱状图背景颜色
            // backgroundStyle: {
            //   color: '#FFFFFF'
            // },//柱状图背景颜色
            barWidth: resizePxNum(50)//柱状图宽度
            // barWidth: 50//柱状图宽度
          },
          //折线数据
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            showSymbol: false,
            symbol: 'circle', //折线点设置：默认为空心，circle为实心点，
            // lineStyle: {
            //   //折线颜色
            //   color: "#A4F19B"
            // },
            itemStyle: {
              normal: {
                color: '#69E85B',//折线点的颜色
                lineStyle: {
                  color: '#A4F19B'//折线的颜色
                }
              }
            },
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' °C';
            //   }
            // },
            // data: [190,220, 290,300, 290,250, 285,120, 100,90, 100,150,270,360,400,390,350,250,150,140]
            data: this.brokenLineValueList
          }
        ]
      }
      this.myChartOne = echarts.init(document.getElementById('myChart'))
      this.myChartOne.setOption(option)

      window.addEventListener('resize', () => {
        if (this.myChartOne) {
          this.myChartOne.resize()
        }
      })

    },
    getData() {
      getAction('/carbon/regionTarget/getData', { area: this.selectArea })
        .then((res) => {
          console.log(res)
          if (res.result) {
            console.log(res.result)
            //X坐标-年份
            this.yearData = res.result
            console.log(this.yearData)
            let year = []
            for (let i = 0; i < this.yearData.length; i++) {
              year.push(this.yearData[i].year)
              this.yearList = year
            }
            console.log(this.yearList)

            let totalData = []
            for (let i = 0; i < this.yearData.length; i++) {
              totalData.push(this.yearData[i].total)
              this.dataValueList = totalData
            }
            console.log(this.dataValueList)
            this.maxL = Math.max.apply(Math, this.dataValueList)
            console.log(this.maxL)
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>


</style>